<template>
	<view class="box">
		<view class="title">
			<view class="navSerch">
				<view class="serch">
					<uni-search-bar class="uni-mt-10" radius="30" placeholder="搜索" clearButton="auto" Button="none"
						cancelText="" v-model="name" bgColor="#F4F6FA" @confirm="search" @blur="blur" @clear="clear" />
				</view>
			</view>
			<view class="searchLeft">
				<uni-section title="" type="line">
					<uni-data-select v-model="name" :localdata="range" @change="change" :clear="false"
						placeholder="全部"></uni-data-select>
				</uni-section>
			</view>
		</view>
		<view>

			<view class="nav-box">
				<view class="nav-ul">
					<view class="nva-li" @click="nvaText(index)" :class="{nt:Nindex==index}"
						v-for="(item,index) in items" :key="index">
						{{item}}
					</view>
				</view>
			</view>

			<view class="content">
				<view class="taber">
					<view v-for="item in list" :key="item.trainId" @click="detail(item)">
						<uniList :pic="item.cover" :title="item.trainName" :card="item.statusStr"
							:timer="filterTime(item.enrollEndStr) "></uniList>
					</view>
				</view>
			</view>
			<view><uni-load-more :status="status" :content-text="contentText" /></view>
		</view>
	</view>
</template>

<script setup>
	import uniList from '@/components/train/ulist/ulist';
	import * as train from '@/common/train.js';
	import {
		onLoad,
		onReady,
		onShareAppMessage,
		onShareTimeline,
		onPullDownRefresh,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		ref,
		getCurrentInstance,
		reactive,
		toRefs
	} from 'vue';

	const searchValue = ref();
	const items = ref(['全部', '报名中', '进行中', '即将开始', '报名未开始', '培训未开始', '已结束']);
	const current = ref(0);
	const name = ref();
	const Nindex = ref(0)
	const range = ref([{
			value: 1,
			text: '全部'
		},
		{
			value: 2,
			text: '报名中'
		},
		{
			value: 3,
			text: '进行中'
		},
		{
			value: 4,
			text: '即将开始'
		},
		{
			value: 5,
			text: '报名未开始'
		},
		{
			value: 6,
			text: '培训未开始'
		},
		{
			value: 7,
			text: '已结束'
		}
	]);
	const list = ref();
	const total = ref();
	// noMore没有更多了
	// loading加载中
	// more下来加载
	const status = ref('more');
	const flag = ref();
	const data = reactive({
		addForm: {},
		contentText: {
			contentdown: '',
			contentrefresh: '加载中',
			contentnomore: '没有更多'
		}
	});
	const {
		addForm,
		contentText
	} = toRefs(data);

	// 加载培训列表数据
	onLoad(option => {
		initData();

	});

	async function initData() {
		addForm.value.flag = current.value;
		addForm.value.pageNum = 1;
		addForm.value.pageSize = 10;
		let res = await train.tainList(addForm.value);
		list.value = res.rows;
		total.value = res.rows;
	}

	// 页面跳转
	// function goRenew() {
	// 	let path = `/pages/usercenter/mycard/renew/`;
	// 	uni.navigateTo({
	// 		url: path
	// 	});
	// }

	// 详情页
	function detail(item) {
		let path = '/pages/train/detailPage/detailPage?item=' + encodeURIComponent(JSON.stringify(item));
		uni.navigateTo({
			url: path
		});
	}

	function nvaText(index) {
		Nindex.value = index
		current.value = index
		initData()
		console.log(index);
	}


	function filterTime(num) {
		if (num) return num.slice(0, 16)
	}


	// 下拉框
	function change(e) {
		if (e) {
			addForm.value.flag = e - 1;
			current.value = e - 1;
			Nindex.value = e - 1
			console.log(e);
			initData();
		}
	}

	// 搜索
	function search(res) {
		if (res.value != '') {
			addForm.value.trainName = res.value;
			initData();
		}

	}

	// 搜索清空按钮
	function clear(res) {
		addForm.value.trainName = '';
		initData();
	}

	// 下来刷新
	onPullDownRefresh(() => {
		addForm.value.flag = 0;
		initData();
		wx.stopPullDownRefresh();
	});

	// 上拉加载
	onReachBottom(async () => {
		if (list.value.length == total.value) {
			status.value = 'noMore';
			return false;
		} else {
			status.value = 'loading';
			addForm.value.pageNum += 1;
			let res = await train.tainList(addForm.value);
			let arr = res.rows;
			list.value = list.value.concat(arr);
			total.value = res.total;
			status.value = 'noMore';
		}
	});
</script>

<style lang="scss">
	.uni-section-header {
		display: none !important;
	}

	.box {
		background-color: #fff;
	}

	.nav-box {
		overflow-x: scroll;
	}

	.nav-ul {
		display: flex;
		justify-content: space-between;
		width: 900rpx;

	}

	.nva-li {
		font-size: 26rpx;
		padding: 10rpx 0rpx;
		margin: 0 15rpx;

	}

	.nt {
		font-size: 30rpx;
		font-weight: 400;
		border-bottom: 2rpx solid #54e1b9;
	}


	.taber {
		width: 100%;
		padding: 25rpx 30rpx;
		padding-bottom: 0;
	}

	.segmented-control__text {
		font-size: 26rpx !important;
		font-family: PingFang SC !important;
		font-weight: 400 !important;
		color: #4c5359 !important;
	}

	.segmented-control__item--text {
		border-bottom: 4rpx solid #54e1b9;
		font-size: 30rpx !important;
		font-family: PingFang SC !important;
		font-weight: 500 !important;
		color: #2b3133 !important;
	}

	.title {
		display: flex;
		justify-content: space-between;
		padding-left: 20rpx;

		.navSerch {
			width: 580rpx;
			position: relative;

			.serch {
				width: 590rpx;
				position: absolute;
				right: -38rpx;
			}
		}

		.searchLeft {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #000000;
			margin-top: 25rpx;
			display: flex;
		}

		.uni-searchbar__cancel {
			display: none;
		}

		:deep(.uni-select) {
			border: 0;
			// padding-left: 20rpx;
		}

		:deep(.uni-select__input-text) {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #000000;
			margin-right: 14rpx;
			width: 110rpx;
			text-align: right;
		}

		:deep(.uni-select__selector-item) {
			// padding: 0 auto;
			text-align: center;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #000000;
		}
	}

	// 搜索框
	.search-result {
		padding-top: 10rpx;
		padding-bottom: 20rpx;
		text-align: center;
	}

	.search-result-text {
		text-align: center;
		font-size: 14rpx;
		color: #666;
	}

	.uni-searchbar {
		padding-right: 0rpx !important;
		padding-left: 20rpx !important;
	}

	.uni-searchbar__box {
		padding-right: 0rpx !important;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 0px;
	}

	.uni-mt-10 {
		width: 600rpx;
	}

	// 分段器
	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 0;
	}

	.uni-common-mt {
		margin-top: 30rpx;
	}

	.uni-padding-wrap {
		// width: 750rpx;
		padding: 0rpx 30rpx;
	}

	.content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		// height: 1235rpx;
		text-align: center;
	}

	.content-text {
		font-size: 14rpx;
		color: #666;
	}

	.color-tag {
		width: 25rpx;
		height: 25rpx;
	}

	.uni-list {
		flex: 1;
	}

	.uni-list-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex: 1;
		flex-direction: row;
		background-color: #ffffff;
	}

	.uni-list-item__container {
		padding: 12rpx 15rpx;
		width: 100%;
		flex: 1;
		position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		box-sizing: border-box;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom-style: solid;
		border-bottom-width: 1rpx;
		border-bottom-color: #eee;
	}

	.uni-list-item__content-title {
		font-size: 14rpx;
	}

	.chat-custom-right {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.chat-custom-text {
		font-size: 12rpx;
		color: #999;
	}
</style>